<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign In to Comet Admin</title>
<link type="text/css" rel="stylesheet" href="Css/Login.css"/>
<link id="color" type="text/css" rel="stylesheet" href="Css/Color/blue.css" />
<link type="text/css" rel="stylesheet" href="Css/Message.css" />
<link type="text/css" rel="stylesheet" href="Css/Input.css" />
<script src="JS/jquery.js" type="text/javascript"></script>
<script src="JS/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function () {
		/* messages fade away when dismiss is clicked */
		$(".hardv-message .dismiss a").click(function() {
			$(".hardv-message").fadeOut("slow");
			return false;
		});
		
		/*focus input*/
		$(".hardtv-input-style-2").focus(function () {
			if (this.value == this.defaultValue) {
				this.value = "";
			}
			else {
				this.select();
			}
		});

		$(".hardtv-input-style-2").blur(function () {
			if ($.trim(this.value) == "") {
				this.value = (this.defaultValue ? this.defaultValue : "");
			}
		});
		
		/*Change style color*/
		style_path = "Css/Color";
		$(".switcher > a").click(function(){
			var style = $("#color");								  
			style.attr("href", "" + style_path + "/" + $(this).attr("title").toLowerCase() + ".css");
			return false;
		});
		
	});
</script>
</head>

<body>
<div id="login">
    	<div class="title">
        	<h5>Sign In to Comet Admin</h5>
        </div>
  <div class="content">
        	<div class="hardv-message" id="message-error">
                <div class="image">
                    <img src="Image/error.png" width="32" height="32" border="0" />
                </div>
                <div class="text">
                    <h4>Error Message</h4>
                    <p>This is the error message.</p>
                </div>
                <div class="dismiss">
                    <a href=""></a>
                </div>
            </div>
            <div class="form">
            	<div class="image">
                	<img src="Image/login.png" height="77" width="55" border="0"/>
                </div>
                <div class="fields">
                	<div class="field">
                    	<div class="label">Username: </div>
                        <div class="input"><input type="text" value="Admin" name="username" id="username" class="hardtv-input-style-2 small"></div>
                    </div>
                    <div class="field">
                    	<div class="label">Password: </div>
                        <div class="input"><input type="password" value="Password" name="username" id="username" class="hardtv-input-style-2 small"></div>
                    </div>
                </div> 
          </div> 
            <div class="button">
            	<input type="submit" value="Sign In" class="gray-btn"/>
           	</div>
    </div>
    <div class="switcher">
        <a href="" class="blue" title="blue" style="outline:none"></a>
        <a href="" class="green" title="green"></a>
        <a href="" class="brown" title="brown"></a>
        <a href="" class="purple" title="purple"></a>
        <a href="" class="red" title="red"></a>
        <a href="" class="greyblue" title="greyblue"></a>
    </div>
  </div>
</body>
</html>
